<!-- 
 * @Author: guanpf 992093924@qq.om
 * @Date: 2023-09-16 20:36:14
 * @LastEditTime: 2023-11-01 13:00:50
 * @LastEditors: guanpf
 * @Description: 
 * @FilePath: /ZCGL_WX/src/views/main/asset/components/asset-rank.vue
 -->
<template>
  <!-- 活跃数 -->
  <div class="asset-rank statistic-item">
    <div class="title">
      <div class="common-title">品牌型号统计</div>
      <div class="more">
        <group border="0">
          <popup-picker
            ref="classPicker"
            :key="1"
            :data="classList"
            :columns="2"
            show-name
            v-model="classId"
            placeholder="请选择分类"
            @on-change="changeList"
            text-align="center"
          ></popup-picker>
        </group>
      </div>
    </div>
    <div class="picker-name">{{className}}</div>
    <div class="rank-list">
      <div class="item" v-for="(item, index) in rankList" :key="index" @click="toDetail(item)">
        <div class="asset-name">
          <span class="rank-index" :style="`color:${colors[index]}`">{{ index + 1 }}</span
          >{{ item.tag }}
        </div>
        <div>{{ item.count }}<span class="unit">件</span></div>
      </div>
      <div v-if="total > rankList.length" class="load-more" @click="getRankList(1)">
        点击加载更多
      </div>
    </div>
  </div>
</template>

<script>
import AssetApi from "@/api/asset";
import { Group, PopupPicker } from "vux";
const colors = ["#446abd", "#87c26e", "#febe57", "#f05b5d", "#61bad9","#446aca", "#82b26e", "#fece57", "#f05b3a", "#11bad9","#126acd", "#87b16e", "#feba47", "#f46b5d", "#61acd9","#446abd", "#87c26e", "#febe57", "#f05b5d", "#61bad9"];

export default {
  components: { Group, PopupPicker },
  data() {
    return {
      colors: colors,
      rankList: [],
      total: 0,
      pageInfo: {
        page: 1,
        pageSize: 10,
      },
      classList: [],
      classId: [],
      className:""
    };
  },
  mounted() {
    this.rankList = [];
    this.assetClass();
  },
  methods: {
    toDetail(item){
      this.$router.push({
        name:"search",
        params:{
          classId:this.classId.length>1?this.classId:[],
          tag:item.tag
        }
      })
    },
    changeList() {
      let classArr = this.$refs.classPicker.getNameValues().split(' ')
      this.className = classArr[0] + '/' + classArr[1]
      this.rankList = [];
      this.pageInfo = {
        page: 1,
        pageSize: 10,
      };
      this.getRankList();
    },
    assetClass() {
      let _params = {
        pageNum: 1,
        pageSize: 1000,
      };
      AssetApi.assetClassTree(_params).then((res) => {
        if (res.code == "0000") {
          let _classList = [];
          let resData = res.data;
          for (let i in resData) {
            let temp = {
              name: resData[i].name,
              value: resData[i].id,
              parent: 0,
            };
            _classList.push(temp);
            if(resData[i].hasChildren){
              for (let j in resData[i].children) {
                let temp1 = {
                  name: resData[i].children[j].name,
                  value: resData[i].children[j].id,
                  parent: resData[i].id,
                };
                _classList.push(temp1);
              }
            }else{
              let temp2 = {
                name: resData[i].name,
                value: resData[i].id,
                parent: resData[i].id,
              };
              _classList.push(temp2);
            }
          }
          this.classId = [resData[0].id,resData[0].hasChildren?resData[0].children[0].id:resData[0].id]
          console.log(127,this.classId)
          this.classList = _classList;
          this.getRankList();
        }
      });
    },
    async getRankList(type=0) {
      if(type==1 && this.total > this.rankList.length){
        this.pageInfo.page++
      }
      let _params = {
        classId: this.classId.length > 1 ? this.classId[1] : "",
        ...this.pageInfo,
      };
      const {
        data: { records, total },
      } = await AssetApi.getStatisicsTags(_params);
      this.total = total;
      if(type==1){
        this.rankList = this.rankList.concat(records);
      }else{
        this.rankList = records
        this.pageInfo.page = 1
      }
    },
  },
};
</script>

<style lang="less" scoped>
.asset-rank {
  padding: 10px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;

    .common-title {
      width: 100px;
    }

    /deep/.more {
      font-size: 14px;
      color: rgb(81, 136, 198);
      flex: 1;

      .weui-cells {
        background: transparent;
        &::before {
          border-top: none;
        }
        &::after {
          border-bottom: none;
        }
      }
      .vux-cell-primary{
        line-height:1;
      }
      .vux-cell-placeholder{
        font-size:12px;
      }
      .weui-cell_access .weui-cell__ft:after{
        margin-top:-3px;
      }
      .vux-popup-picker-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        width: 140px;
        display: inline-block;
      }
    }
  }
}
.rank-list {
  margin-top: 10px;
  padding: 0 20px;
  .item {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;

    > :nth-child(1) {
      margin-right: 10px;
      flex: 1;
      /* 单行显示省略号 */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .rank-index {
        width: 20px;
        display: inline-block;
      }
    }
    > :nth-child(2) {
      font-size: 18px;
      .unit {
        font-size: 12px;
        color: #666;
        margin-left: 2px;
      }
    }
  }
}
.load-more {
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #666;
}
.picker-name{
  margin-top: 10px;
  text-align: center;
  color: #446Abd;
  font-size:14px;
}
</style>
